<!DOCTYPE HTML>
<html>

<head>
    <meta name="viewport" content="width=device-width initial-scale=1.0 maximum-scale=1.0 user-scalable=0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>区域掩模</title>
    <style>
        body,
        html,
        #container {
            margin: 0;
            width: 100%;
            height: 100%
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script language="javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=eea8e990d8a35eeec37314f550058d61&plugin=Map3D,AMap.DistrictSearch"></script>
    <script language="javascript">
        var opts = {
            subdistrict: 0,
            extensions: 'all',
            level: 'district'
        };
        //利用行政区查询获取边界构建mask路径
        //也可以直接通过经纬度构建mask路径
        var district = new AMap.DistrictSearch(opts);
        district.search('济阳区', function(status, result) {
            var bounds = result.districtList[0].boundaries;
            var mask = []
            for (var i = 0; i < bounds.length; i += 1) {
                mask.push([bounds[i]])
            }
            var map = new AMap.Map('container', {
                mask: mask,
                center: [116.996838977, 36.9096131154],
                disableSocket: true,
                viewMode: '3D',
                showLabel: false,
                labelzIndex: 130,
                pitch: 40,
                zoom: 9,
                layers: [
                    new AMap.TileLayer.Satellite()
                ]
            });

            // var maskerIn = new AMap.Marker({
            //     position: [116.501415, 39.926055],
            //     map: map
            // })
            // var maskerOut = new AMap.Marker({ //区域外的不会显示
            //     position: [117.001415, 39.926055],
            //     map: map
            // })

            //添加高度面
            var object3Dlayer = new AMap.Object3DLayer({
                zIndex: 1
            });
            map.add(object3Dlayer)
            var height = -8000;
            var color = '#0088ffcc'; //rgba
            var wall = new AMap.Object3D.Wall({
                path: bounds,
                height: height,
                color: color
            });
            wall.transparent = true
            object3Dlayer.add(wall)

            //添加描边
            for (var i = 0; i < bounds.length; i += 1) {
                new AMap.Polyline({
                    path: bounds[i],
                    strokeColor: '#99ffff',
                    strokeWeight: 4,
                    map: map
                })
            }
        });
    </script>
</body>

</html>